<template>
  <div class="menu">
    <vue-scroll :ops="scrollOptions" style="width: 100%; height: 100%;">
      <ul v-for="firstItem in (menus || [])" class="menu-item menu-head" :key="firstItem.uuid">
        <li class="item" :class="openedMenuList.indexOf(firstItem.uuid) != -1 ? 'acitve' : ''" :style="getFirstMenuStyle(firstItem)">
          <!-- 一级菜单 -->
          <div
            class="name head-name"
            :title="firstItem.name"
            :class="`${activeUuid == firstItem.uuid ? 'active' : ''} ${firstItem.children && firstItem.children.length ? 'has-children' : ''}`"
            :style="getFirstMenuTextStyle(firstItem)"
            @click="clickMenu(1, firstItem)">
            <!-- <i class="ivu-icon" :class="getIcon()" />{{firstItem.name}} -->
            {{firstItem.name}}
          </div>
          <ul v-for="secondItem in (firstItem.children || [])" :key="secondItem.uuid" class="menu-item second-menu">
            <li class="second-item" :class="activeUuid == secondItem.uuid ? 'active' : ''" @click="clickMenu(2, secondItem)">
              <!-- 二级菜单 -->
              <div class="name second-name" :title="secondItem.name" @click="clickMenu(2, secondItem)">{{secondItem.name}}</div>
            </li>
          </ul>
        </li>
      </ul>
    </vue-scroll>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import uuid from 'uuid'

// 定义菜单列表
const menuList = [
  {
    name: '系统设置',
    children: [
      {
        routeName: 'version',
        name: '用户管理',
        path: '/console/version/publish',
        uuid: uuid()
      }
    ]
  }
]

export default {
  watch: {

  },
  data () {
    return {
      openedMenuList: [],
      activeUuid: '',
      menus: []
    }
  },
  mounted () {
    this.menus = menuList
  },
  methods: {
    ...mapActions(['changeMenuItem', 'changeMachineRoomList', 'changeCafe', 'changeLoadingMenu', 'changeMenuList']),

    getFirstMenuStyle (menu) {
      if (this.openedMenuList.indexOf(menu.uuid) !== -1) {
        return {
          height: `${40 + 40 * menu.children.length}px`
        }
      }
    },
    getFirstMenuTextStyle (menu) {
      let children = menu.children || []
      if (children.length) {
        for (let i = 0; i < children.length; i++) {
          if (children[i].uuid === this.activeUuid) {
            return {
              color: '#fff'
            }
          }
        }
      }
    },
    clickMenu (level, item, random) {
      if (level === 1) {
        let uuid = item.uuid
        if (item.children && item.children.length) {
          let openedMenuList = this.openedMenuList
          if (openedMenuList.indexOf(uuid) === -1) {
            openedMenuList.push(uuid)
          } else {
            openedMenuList.splice(openedMenuList.indexOf(uuid), 1)
          }
        } else {
          this.changeMenuItem(item)
          this.activeUuid = uuid

          // 一级菜单暂时还不需要随机数
          this.$router.push({
            path: item.path
          })
        }
      } else if (level === 2) {
        this.changeMenuItem(item)
        this.activeUuid = item.uuid

        let query = {}
        if (item.id) {
          query.id = item.id
        }

        if (random) {
          query._random = random
        }

        this.$router.push({
          path: item.path,
          query
        })
      }
    },
    toWelcome () {
      this.$router.push({
        name: 'welcome'
      })
    }
  }
}
</script>
<style lang="less">
.menu {
  height: 100%;
  overflow: hidden;
  padding: 0 0 50px;
  @active-color: #2d8cf0;
  /deep/ .__bar-is-vertical {
    right: -3px !important;
  }
  .menu-item {
    color: @menu-item-color;
    font-size: 14px;
    .item {
      height: 40px;
      overflow-y: hidden;
      transition: height .4s ease;
      &.acitve {
        .name {
          &.head-name {
            &.has-children {
              &:before {
                transform: translateY(-50%) rotateZ(-45deg);
              }
              &:after {
                transform: translateY(-50%) rotateZ(45deg);
              }
            }
          }
        }
      }
      .name {
        padding: 0 20px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        transition: background .4s ease;
        &.active {
          color: #fff;
          background: @active-color;
        }
        &.head-name {
          line-height: 40px;
          font-size: 14px;
          font-weight: 600;
          position: relative;
          > img {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 50%;
            left: 3px;
            transform: translateY(-50%);
          }
          &.has-children {
            color: @menu-item-color;
            &:before {
              content: '';
              position: absolute;
              width: 7px;
              height: 2px;
              top: 50%;
              right: 12px;
              transform: translateY(-50%) rotateZ(45deg);
              background: #fff;
              transition: transform .4s ease;
            }
            &:after {
              content: '';
              position: absolute;
              width: 7px;
              height: 2px;
              top: 50%;
              right: 17px;
              transform: translateY(-50%) rotateZ(-45deg);
              background: #fff;
              transition: transform .4s ease;
            }
          }
        }
        &.second-name {
          padding: 0 40px;
        }
      }
      .second-item {
        background: @second-menu-item-bg;
        &.active {
          .second-name {
            color: #fff;
            background: @active-color;
          }
        }
      }
    }
  }
}
</style>
